<template>
    <view>
        <view class="page" v-for="(item, index) in person" :key="index">
            <view class="left">
                <view class="content">{{ item.name }}</view>

                <view class="content">身份证 {{ item.card }}</view>
            </view>

            <view class="disan">
                <ant-button size="small" onTap="gobianji">编辑</ant-button>
            </view>
        </view>

        <view class="disi">
            <ant-button type="primary" onTap="handleTap">添加出行人</ant-button>
        </view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

export default {
    components: {

    },
    data() {
        return {
            name: '',
            card: '',
            person: []
        };
    },
    onShow() {
        this.loadData();
    },
    methods: {
        loadData() {
            uni.getStorage({
                key: 'openId',
                success: (res) => {
                    console.log(res.data.openId);
                    uni.request({
                        url: url + '/selectAllGopeople',
                        method: 'POST',
                        data: {
                            openID: res.data.openId
                        },
                        headers: {
                            'content-type': 'application/json' // 默认值
                        },
                        dataType: 'json',
                        success: (res) => {
                            if (res.data && res.data.data) {
                                const people = res.data.data;
                                const personArray = [];
                                for (let i = 0; i < people.length; i++) {
                                    personArray.push({
                                        name: people[i].peopleName,
                                        card: people[i].peopleCard
                                    });
                                    console.log(people[i].peopleName);
                                }
                                this.setData({
                                    person: personArray
                                });
                            }
                        },
                        fail: (error) => {
                            console.error('fail: ', JSON.stringify(error));
                        },
                        complete: () => {
                            uni.hideLoading();
                        }
                    });
                },
                fail: (error) => {
                    console.error('getStorage fail: ', JSON.stringify(error));
                }
            });
        },

        handleTap() {
            uni.navigateTo({
                url: '/pages/tianjiachuxingren/tianjiachuxingren'
            });
        },

        gobianji() {
            uni.navigateTo({
                url: '/pages/bianjichuxingren/bianjichuxingren'
            });
        }
    }
};
</script>
<style>
.page {
    background-color: white;
    flex-direction: column;
    font-family: Arial, sans-serif;
    height: 100px;
    margin: 16px;
    padding: 8px;
    background-color: white;
    border-radius: 10px;
}

.left {
    float: left;
    width: 70%;
    margin-left: 8px;
}
.content {
    font-size: 20px;
    line-height: 40px;
    background-color: rgb(253, 251, 251);
}
.disan {
    height: 30px;
    width: 50px;
    margin-top: 20px;
    background-color: rgb(248, 250, 252);
    padding-right: 0px;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    float: right;
    margin-left: auto;
}
.disi {
    height: 100px;
    width: 90%;
    bottom: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    left: 20px;
    right: 10px;
}

</style>
